<template>
 <div class="my-tag">
    <input 
    v-if="isEdit"
     :value="value"
     @keyup.enter="handleEnter"
     @blur="isEdit=false"
      v-focus
      class="input"
      type="text"
      placeholder="输入标签"
    />
    <div
    v-else
    @dblclick="handleClick" 
    class="text">
      {{value}}
    </div>
   </div>
</template>

<script>
export default {
data(){
  return{
    isEdit:false
  }
},
  methods:{
    handleClick(){
      this.isEdit=true  
    },
    handleEnter(e){
      if(e.target.value.trim()===''){
        return alert('请输入文字内容')
      }
      this.$emit('input',e.target.value)
      this.isEdit=false
    }
  },
  props:{
    value:String
  }
}
</script>

<style scope>
  .table-case .my-tag {
    cursor: pointer;
   
  }
  .table-case .my-tag .input {
      appearance: none;
      outline: none;
      border: 1px solid #ccc;
      width: 100px;
      height: 40px;
      box-sizing: border-box;
      padding: 10px;
      color: #666;
    }
    .table-case .my-tag .input::placeholder {
        color: #666;
      }
</style>